<template>
    <div class="overview">
        <div class="top">
            <div class="top-left">
                <ul class="card-ul">
                    <li class="card-li" v-for="(item, i) in cardList" :key="i">
                        <div class="card-content">
                            <p class="card-title">{{ item.title }}</p>
                            <div
                                class="card-value"
                                :class="
                                    item.count == 0
                                        ? 'value-null'
                                        : 'value-normal'
                                "
                            >{{ item.count }}</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="top-right">
                <div class="chart-container">
                    <div class="chart-title">流程类别统计</div>
                    <div class="chart-content">
                        <v-chart
                            :options="barOption1"
                            :autoresize="true"
                            style="width:100%;height:100%;display: inline-block"
                        ></v-chart>
                    </div>
                </div>
            </div>
        </div>
        <div class="bot">
            <div class="bot-left">
                <div class="chart-container">
                    <div class="chart-title">各个资源的流程数统计</div>
                    <div class="chart-content">
                        <v-chart
                            :options="barOption2"
                            :autoresize="true"
                            style="width:100%;height:100%;display: inline-block"
                        ></v-chart>
                    </div>
                </div>
            </div>
            <div class="bot-middle">
                <div class="chart-container">
                    <div class="chart-title">资源类别统计</div>
                    <div class="chart-content">
                        <v-chart
                            :options="PieOption1"
                            :autoresize="true"
                            style="width:100%;height:100%;display: inline-block"
                        ></v-chart>
                    </div>
                </div>
            </div>
            <div class="bot-right">
                <div class="chart-container">
                    <div class="chart-title">工作节点统计</div>
                    <div class="chart-content">
                        <v-chart
                            :options="PieOption2"
                            :autoresize="true"
                            style="width:100%;height:100%;display: inline-block"
                        ></v-chart>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import "echarts/lib/chart/line";
import "echarts/lib/component/polar";
import { Vue, Component, Watch } from "vue-property-decorator";
import { SucRow, SucCol } from "@suc/ui";
import {
    barOption1,
    barOption2,
    PieOption1,
    PieOption2,
    cardList
} from "@/utils/chartsDate";

@Component({
    components: {
        SucRow,
        SucCol
    }
})
export default class Overview extends Vue {
    barOption1: object = barOption1;
    barOption2: object = barOption2;
    PieOption1: object = PieOption1;
    PieOption2: object = PieOption2;
    cardList: object[] = cardList;
}
</script>

<style lang="scss" scoped>
$chart-title-height: 45px;
$card-title-height: 50px;
.overview {
    height: 100%;
    .top,
    .bot {
        overflow: hidden;

        .chart-container {
            width: 100%;
            height: 100%;
            background-color: #fff;
            -webkit-box-shadow: 0 3px 8px 0 rgba(28, 58, 96, 0.15);
            box-shadow: 0 3px 8px 0 rgba(28, 58, 96, 0.15);
            border-radius: 4px;
            .chart-title {
                height: $chart-title-height;
                line-height: $chart-title-height;
                background-color: #e8eefd;
                border: 1px solid #dce3f5;
                border-left: 3px solid #3b55e6;
                color: #3949a6;
                font-size: 14px;
                padding-left: 25px;
            }
            .chart-content {
                height: calc(100% - #{$chart-title-height});
                background-color: #fff;
            }
        }
    }
    .top {
        width: 100%;
        height: 45%;
        .top-left {
            float: left;
            width: 60%;
            height: 100%;
            overflow: hidden;

            .card-ul {
                width: 100%;
                height: 100%;
                .card-li {
                    display: inline-block;
                    width: 25%;
                    height: 50%;
                    padding-right: 13px;
                    padding-bottom: 16px;
                    cursor: pointer;

                    .card-content {
                        height: 100%;
                        background-color: #fff;
                        -webkit-box-shadow: 0 3px 8px 0 rgba(28, 58, 96, 0.15);
                        box-shadow: 0 3px 8px 0 rgba(28, 58, 96, 0.15);
                        border-radius: 4px;
                        .card-title {
                            width: 100%;
                            height: $card-title-height;
                            line-height: $card-title-height;
                            color: #fff;
                            font-weight: bolder;
                            font-size: 16px;
                            background-color: #2aa9ff;
                            border-radius: 4px 4px 0 0;
                            text-align: center;
                        }
                        .card-value {
                            height: calc(100% - #{$card-title-height});
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-pack: center;
                            -ms-flex-pack: center;
                            justify-content: center;
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            align-items: center;
                            font-size: 18px;
                            font-weight: bolder;
                            letter-spacing: 2px;
                            background: url()
                                no-repeat;
                            background-size: 50% 100%;
                            background-position-x: 94%;
                            color: #5a61ed;
                        }
                        .value-null {
                            color: rgb(190, 190, 190);
                        }
                        .value-normal {
                            color: rgb(42, 169, 255);
                        }
                        &:hover {
                            -webkit-box-shadow: 0 3px 8px 0
                                rgba(28, 58, 96, 0.3);
                            box-shadow: 0 3px 8px 0 rgba(28, 58, 96, 0.3);
                        }
                    }

                    &:first-child {
                        .card-content {
                            .card-title {
                                background-color: #5a61ed;
                            }
                            .card-value {
                                color: #5a61ed;
                            }
                        }
                    }
                }
            }
        }
        .top-right {
            float: left;
            width: 40%;
            height: 100%;
            padding-bottom: 16px;
            overflow: hidden;
        }
    }

    .bot {
        height: 55%;
        padding-top: 20px;
        .bot-left {
            float: left;
            width: 50%;
            height: 100%;
            padding-right: 20px;
            overflow: hidden;
        }
        .bot-middle {
            float: left;
            width: 25%;
            height: 100%;
            padding-right: 20px;
            overflow: hidden;
        }
        .bot-right {
            float: left;
            width: 25%;
            height: 100%;
            overflow: hidden;
        }
    }
}
</style>
